<template>
	<div>
		<div class="items">
			<div class="item" @mouseenter="hoverWord(1)" @mouseleave="hoverWordLeave(1)">
				<div class="out-circle"></div>
				<div class="item-content">
					<img src="../assets/1.png" alt="">
					<div class="word">测试</div>
				</div>
			</div>
		</div>
		<ace-editor :value='value'></ace-editor>
	</div>
</template>

<script>
	import aceEditor from './aceEditor.vue'
	export default {
		components: {
			aceEditor
		},
		data() {
			return {
				value:`
<div class="items">
	<div class="item" @mouseenter="hoverWord(1)" @mouseleave="hoverWordLeave(1)">
		<div class="out-circle"></div>
		<div class="item-content">
			<img src="../assets/1.png" alt="">
			<div class="word">测试</div>
		</div>
	</div>
</div>

<style lang="scss" scoped>
	.items {
		height: 320px;
		width: 440px;
		background-color: #000000;

		.item {
			width: 210px;
			height: 210px;
			border-radius: 50%;
			position: relative;

			.out-circle {
				width: 210px;
				height: 210px;
				border: 1px solid #fff;
				border-left: 0;
				border-top: 0;
				border-radius: 50%;
				position: relative;
				transition: all .45s linear;

				&:hover {
					transform: rotate(180deg);
				}
			}

			.out-circle:before {
				content: "";
				width: 6.5px;
				height: 6.5px;
				border-radius: 50%;
				position: absolute;
				top: 120px;
				left: 0px;
				background-color: #fff;
			}

			&:hover {
				.out-circle {
					transform: rotate(180deg);
				}

				.item-content {
					img {
						transform: scale(1.2);
					}

					.word {
						font-size: 14px;
					}
				}
			}

			.item-content {
				width: 162px;
				height: 162px;
				border-radius: 50%;
				overflow: hidden;
				position: absolute;
				top: 24px;
				left: 24px;
				z-index: 999;

				img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					position: relative;
					filter: brightness(50%);
					transition: all .35s ease-in-out;
				}

				.word {
					height: 40px;
					width: 145px;
					font-size: 22px;
					line-height: 38px;
					font-weight: 700;
					color: #fff;
					text-align: center;
					position: relative;
					top: -100px;
					left: 8px;
					border-top: 1px solid #fff;
					border-bottom: 1px solid #fff;
					cursor: pointer;
				}

			}

		}
	}
</style>

				`
			}
		},
		methods: {
			hoverWord() {

			},
			hoverWordLeave() {

			}
		},
	}
</script>

<style lang="scss" scoped>
	.items {
		height: 320px;
		width: 440px;
		background-color: #000000;
		display: flex;
		justify-content: center;
		align-items: center;

		.item {
			width: 210px;
			height: 210px;
			border-radius: 50%;
			position: relative;

			.out-circle {
				width: 210px;
				height: 210px;
				border: 1px solid #fff;
				border-left: 0;
				border-top: 0;
				border-radius: 50%;
				position: relative;
				transition: all .45s linear;

				&:hover {
					transform: rotate(180deg);
				}
			}

			.out-circle:before {
				content: "";
				width: 6.5px;
				height: 6.5px;
				border-radius: 50%;
				position: absolute;
				top: 120px;
				left: 0px;
				background-color: #fff;
			}

			&:hover {
				.out-circle {
					transform: rotate(180deg);
				}

				.item-content {
					img {
						transform: scale(1.2);
					}

					.word {
						font-size: 14px;
					}
				}
			}

			.item-content {
				width: 162px;
				height: 162px;
				border-radius: 50%;
				overflow: hidden;
				position: absolute;
				top: 24px;
				left: 24px;
				z-index: 999;

				img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					position: relative;
					filter: brightness(50%);
					transition: all .35s ease-in-out;
				}

				.word {
					height: 40px;
					width: 145px;
					font-size: 22px;
					line-height: 38px;
					font-weight: 700;
					color: #fff;
					text-align: center;
					position: relative;
					top: -100px;
					left: 8px;
					border-top: 1px solid #fff;
					border-bottom: 1px solid #fff;
					cursor: pointer;
				}

			}

		}
	}
</style>
